<template>
	<view class="guarantee">
		<!-- 时间轴 -->
		<time-line :processIndex="5" />
		<view class="black-case"></view>
		<view class="guarantee-case">
			<view class="tishi-case">
				<view class="tishi-case-top">
					<text class="tishi-case-top-text">温馨提示：</text>
					<text class="tishi-case-top-status" :class="{ 'tishi-case-top-status-active': detail.status == 1 }">
						{{ detail.status == 1 ? '生效中' : detail.status == 2 ? '未生效' : '已过期' }}
					</text>
				</view>
				<view class="tishi-case-bottom" v-if="detail.status == 2">亲，猫咪领取的当天为第一天，可担保十天哦。详情介绍请点击免责声明。</view>
				<view class="tishi-case-bottom" v-else>您的担保生效日期为{{ detail.take_time }}，担保时常为10天，祝您和您的宠物生活愉快！</view>
			</view>
			<view class="guarantee-service-title">您可能还需要的服务。</view>
			<view class="guarantee-service-text" @click="lookDocx(1)">
				免责声明
				<text class="guarantee-service-color">查看</text>
			</view>
			<button class="guarantee-service-text" open-type="contact">猫咪兽医免费咨询（你的专属猫咪医生）</button>
			<view class="guarantee-service-text" @click="lookDocx(2)">新手养猫手册(必看哦) ~JJL</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
import TimeLine from '../components/timeLine/timeLine.vue';
import { ifvalid } from '@/api/buyCat.js';
import { formatTime } from '@/util/time.js';
export default {
	components: {
		TimeLine
	},
	data() {
		return {
			goods_id: '', //商品id
			detail: {}
		};
	},
	methods: {
		async ifvalid() {
			const res = await ifvalid({
				goods_id: this.goods_id,
				openid: app.globalData.openid
			});
			res.take_time = formatTime(res.take_time);
			this.detail = res;
		},
		// 下载word
		lookDocx(type) {
			let url;
			if (type == 1) {
				url = 'https://www.nabercat.com/Public/免责声明.docx';
			} else {
				url = 'https://www.nabercat.com/NABERCAT 新手养猫手册.docx';
			}
			uni.downloadFile({
				url: url,
				success: function(res) {
					console.log(res);
					uni.openDocument({
						filePath: res.tempFilePath,
						success: function(res) {
							console.log('打开文档成功');
						}
					});
				}
			});
		}
	},
	onLoad(options) {
		this.goods_id = options.goods_id;
		this.ifvalid();
	}
};
</script>

<style scoped lang="scss">
.guarantee {
	padding-top: 156rpx;
	.guarantee-case {
		padding: 32rpx 30rpx 0;
		.tishi-case {
			padding: 32rpx 30rpx 30rpx;
			background: #f2f2f2;
			border-radius: 12rpx;
			margin-bottom: 52rpx;
			.tishi-case-top {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;
				.tishi-case-top-text {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}
				.tishi-case-top-status {
					padding: 0 16rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: rgba(51, 51, 51, 0.12);
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #333333;
				}
				.tishi-case-top-status-active {
					background: rgba(250, 131, 132, 0.2047);
					color: #ff6465;
				}
			}
			.tishi-case-bottom {
				font-size: 28rpx;
				color: #666666;
				line-height: 44rpx;
			}
		}
		.guarantee-service-title {
			font-size: 28rpx;
			color: #666666;
			line-height: 48rpx;
		}
		.guarantee-service-text {
			font-size: 28rpx;
			color: #fa8384;
			line-height: 36rpx;
			margin-top: 24rpx;
			.guarantee-service-color {
				color: #333333;
			}
		}
		button {
			padding: 0;
			margin: 0;
			background: #ffffff;
			text-align: left;
		}
	}
	.black-case {
		width: 100%;
		height: 16rpx;
		background: #f2f2f2;
	}
}
</style>
